<template>
    <div class="video-player-wrapper">
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script>
import videojs from 'video.js'

export default {
  name: 'VideoPlayer',
  props: {
    video: {
      type: Object,
      default () {
        return {}
      }
    },
    options: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      player: null
    }
  },
  watch: {
    video: {
      immediate: true,
      handler (val) {
        this.doRefresh()
      }
    }
  },
  mounted () {
    this.doRefresh()
  },
  beforeDestroy () {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    /* 刷新视频 */
    doRefresh () {
      if (!this.video || !this.video.sources) {
        return
      }
      if (!this.player) {
        this.options.userActions = this.options.userActions || {}
        this.options.userActions.hotkeys = this.listenToPlayEvent
        this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady () {
          console.log('onPlayerReady', this)
        })
      }
      this.player.poster(this.video.poster)
      this.player.src(this.video.sources)
    },
    /* 监听键盘事件 */
    listenToPlayEvent (event) {
      let that = this
      let vol = 0.1 // 百分比数值
      let time = 10 // 单位秒

      let e = event || window.event
      if (!that.player || !e) {
        return
      }

      // 键盘按键事件
      if (e.keyCode === 38) {
        // 向上
        let newVol = that.player.volume() + vol
        newVol = newVol < 1 ? newVol : 1
        that.player.volume(newVol)
      } else if (e.keyCode === 40) {
        // 向下
        let newVol = that.player.volume() - vol
        newVol = newVol > 0 ? newVol : 0
        that.player.volume(newVol)
      } else if (e.keyCode === 37) {
        // 向左
        let bufferedTimeRange = this.player.buffered()
        let newTime = that.player.currentTime() - time
        newTime = newTime > bufferedTimeRange.start(0) ? newTime : bufferedTimeRange.start(0)
        that.player.currentTime(newTime)
      } else if (e.keyCode === 39) {
        // 向右
        let bufferedTimeRange = this.player.buffered()
        let newTime = that.player.currentTime() + time
        newTime = newTime < bufferedTimeRange.end(0) ? newTime : bufferedTimeRange.end(0)
        that.player.currentTime(newTime)
      } else if (e.keyCode === 32) {
        // 空格暂停/启动
        if (that.player.paused()) {
          that.player.play()
        } else {
          that.player.pause()
        }
      }
    },
    showStatus () {
      var bufferedTimeRange = this.player.buffered()

      // number of different ranges of time have been buffered.
      // Usually 1
      var numberOfRanges = bufferedTimeRange.length

      // Time in seconds when the first range starts.
      // Usually 0
      var firstRangeStart = bufferedTimeRange.start(0)

      // Time in seconds when the first range ends
      var firstRangeEnd = bufferedTimeRange.end(0)

      // Length in seconds of the first time range
      var firstRangeLength = firstRangeEnd - firstRangeStart

      var howMuchIsDownloaded = this.player.bufferedPercent()
      console.log('======', numberOfRanges, firstRangeStart, firstRangeLength, howMuchIsDownloaded)
    }
  }
}
</script>
